TypeScript Import Type: põhjalik ülevaade ainult tüüpide importimise deklaratsioonidest

TypeScript, JavaScripti ülikomplekt, toob staatilise tüübisüsteemi dünaamilisse veebiarenduse maailma. Üks selle peamistest funktsioonidest on võime importida tüüpe teistest moodulitest. Kuid tüüpide importimine, mida kasutatakse ainult tüüpide kontrollimiseks, võib viia ebavajaliku koodini lõplikus JavaScripti paketis. Selle proble probleemi lahendamiseks tutvustas TypeScript import type süntaksit. See blogipostitus uurib import type üksikasjalikult, selgitades selle eesmärki, kasutusviisi, eeliseid ja potentsiaalseid hoiatusi.

Mis on import type?

import type on TypeScripti spetsiifiline süntaks, mis võimaldab teil importida moodulist ainult tüübimääratlusi, ilma et impordiksite ühtegi mooduli käitusaja väärtustest. See on eriti kasulik, kui peate kasutama tüüpi teisest moodulist tüübimääratluste või tüüpide kontrollimiseks, kuid ei pea selle käitusajal ligi pääsema ühtegi selle väärtustest. See aitab otseselt kaasa väiksemale paketisuurusele, kuna JavaScripti kompilaator jätab imporditud mooduli kompilaatoriprotsessi ajal välja, kui seda kasutatakse ainult tüübiteabe jaoks.

Miks kasutada import type?

import type kasutamiseks on mitu veenvat põhjust:

• Parem paketisuurus: Kui impordite moodulit standardse import avaldusega, sisaldub kogu moodul genereeritud JavaScriptis, isegi kui te kasutate ainult selle tüüpe. import type tagab, et kompilaatoriprotsessi ajal kasutatakse ainult tüübiteavet ja moodulit ei lisata lõplikku paketti, mille tulemuseks on väiksem ja tõhusam pakett.
• Tsükiliste sõltuvuste vältimine: Tsükilised sõltuvused võivad olla suurtes projektides oluline probleem, mis põhjustab käitusaja vigu ja ootamatut käitumist. import type aitab tsükilisi sõltuvusi katkestada, võimaldades teil importida moodulist ainult tüübimääratlusi ilma selle väärtusi importimata, vältides seega mooduli koodi täitmist impordiprotsessi ajal.
• Parem jõudlus: Väiksemad paketisuurused tähendavad kiiremaid laadimisaegu, eriti veebirakenduste puhul. Ebavajaliku koodi paketist eemaldamisega aitab import type parandada teie rakenduse üldist jõudlust.
• Täiustatud koodi selgus: import type kasutamine muudab selgeks, et impordite ainult tüübiteavet, mis parandab teie koodi loetavust ja hooldatavust. See annab teistele arendajatele märku, et imporditud moodulit kasutatakse ainult tüüpide kontrollimiseks.

Kuidas kasutada import type

import type süntaks on lihtne. Standardse import avalduse asemel kasutate import type, millele järgneb imporditav tüüp. Siin on põhimõtteline näide:

            import type { User } from './user';

function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}
            

              
                Copy
              
            
          

Selles näites impordime User tüübi ./user moodulist. Kasutame ainult User tüüpi tüübimääranguks funktsioonis greetUser. User mooduli väärtused pole käitusajal ligipääsetavad.

import type kombineerimine tavaliste importidega

Samuti saate kombineerida import type tavaliste importidega samas avalduses, kasutades type võtit:

            import { someValue, type User, type Product } from './module';

function processUser(user: User): void {
  // ...
}

console.log(someValue);

            

              
                Copy
              
            
          

Sel juhul imporditakse someValue tavalise väärtusena, samas kui User ja Product imporditakse ainult tüüpidena. See võimaldab teil importida nii väärtusi kui ka tüüpe samast moodulist ühe avaldusega.

Kõikide impordimine tüüpidena

Kui teil on vaja importida kõik tüübid moodulist ilma ühtegi väärtust importimata, saate kasutada nimeruumi importimise süntaksit koos import type:

            import type * as Types from './types';

function processData(data: Types.Data): void {
  // ...
}
            

              
                Copy
              
            
          

Siin impordime kõik tüübid ./types moodulist Types nimeruumi. Seejärel saame tüüpidele ligi Types. prefiksiga.

Näited erinevate projektitüüpide kohta

import type eelised kehtivad erinevate projektitüüpide puhul. Siin on mõned näited:

Näide 1: Reacti komponent

Kaaluge Reacti komponenti, mis saab kindlate tüüpidega propsi:

            import React from 'react';
import type { User } from './user';

interface Props {
  user: User;
}

const UserProfile: React.FC<Props> = ({ user }) => {
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>>
  );
};

export default UserProfile;
            

              
                Copy
              
            
          

Selles Reacti näites tagab import type { User } from './user';, et imporditakse ainult User tüübi määratlus, optimeerides paketisuurust. Me ei kasuta otse 'user' mooduli väärtusi; me lihtsalt kasutame seda 'User' *tüüpi*, nagu on määratletud selles moodulis.

Näide 2: Node.jsi taustaprogramm

Node.jsi taustaprogrammi rakenduses võite andmebaasimudeleid tüüpidena defineerida:

            import type { User } from './models';
import { createUser } from './db';

async function registerUser(userData: User): Promise<void> {
  await createUser(userData);
}

            

              
                Copy
              
            
          

Siin väldib import type { User } from './models'; kogu models mooduli lisamist paketti, kui ainult User tüüp on vajalik tüüpide kontrollimiseks. Funktsioon createUser *on* imporditud, kuna seda vajatakse *käitusajal* kasutamiseks.

Näide 3: Angulari teenus

Angulari teenuses võite süstida teenuse, mis kasutab tüüpi:

            import { Injectable } from '@angular/core';
import type { Product } from './product.model';
import { ProductService } from './product.service';

@Injectable({
  providedIn: 'root',
})
export class OrderService {
  constructor(private productService: ProductService) {}

  getFeaturedProducts(): Product[] {
    return this.productService.getProducts().filter(p => p.isFeatured);
  }
}

            

              
                Copy
              
            
          

Product tüüpi kasutatakse productService.getProducts() meetodi tagastatava andmete struktuuri defineerimiseks. Kasutades import type { Product } from './product.model'; tagatakse, et imporditakse ainult tüübiteave, parandades Angulari rakenduse jõudlust. ProductService *on* käitusaja sõltuvus.

import type kasutamise eelised erinevates arenduskeskkondades

import type rakendamise eelised laienevad erinevatele arendusseadistustele:

• Monorepod: Monorepo struktuurides vähendab import type üksikute pakettide pakettide suurust, mis toob kaasa kiiremad ehitusajad ja tõhusama ressursikasutuse.
• Mikrotiinused: Mikrotiinuse arhitektuuris lihtsustab import type sõltuvuste haldamist ja parandab teenuste modulaarsust, tagades ainult vajaliku tüübiteabe importimise.
• Serverless funktsioonid: Serverless funktsioonide keskkondades vähendab import type funktsioonide juurutuspakettide suurust, mis toob kaasa kiiremad külmkäivitused ja optimeeritud ressursikulu.
• Platvormideülene arendus: Kas veebi, mobiili või töölaua platvormide arendamisel tagab import type ühtlase tüüpide kontrolli erinevates keskkondades ja vähendab käitusaja vigade tõenäosust.

Potentsiaalsed hoiatused

Kuigi import type on üldiselt kasulik, on mõned hoiatused, millest teadlik olla:

• TypeScripti versiooni nõue: import type tutvustati TypeScript 3.8-s. Selle süntaksi kasutamiseks peate kasutama vähemalt seda TypeScripti versiooni.
• Käitusaja kasutus: Te ei saa käitusajal kasutada import type imporditud väärtust. Kui peate käitusajal moodulist väärtusele ligi pääsema, peate kasutama tavalist import avaldust. import type imporditud väärtuse kasutamine käitusajal põhjustab kompilaatori aja vea.
• Transpilerid ja bundlerid: Veenduge, et teie transpiler (nt Babel) ja bundler (nt Webpack, Rollup, Parcel) oleks õigesti konfigureeritud import type avalduste käsitlemiseks. Enamik moodsaid tööriistu toetab import type kohe karbist välja võttes, kuid on alati hea mõte oma konfiguratsiooni topeltkontrollida. Mõned vanemad tööriistad võivad vajada spetsiifilisi pistikprogramme või konfiguratsioone nende importide õigeks eemaldamiseks.

Parimad tavad import type kasutamiseks

import type tõhusaks kasutamiseks kaaluge järgmisi parimaid tavasid:

• Kasutage import type alati, kui võimalik: Kui kasutate moodulit ainult selle tüübimääratluste jaoks, kasutage alati import type. See aitab vähendada teie paketi suurust ja parandada jõudlust.
• Kombineerige import type tavaliste importidega: Kui impordite nii väärtusi kui ka tüüpe samast moodulist, kasutage ühendatud süntaksit, et hoida oma kood kompaktne ja loetav.
• Hoidke tüübimääratlused eraldi: Kaaluge oma tüübimääratluste hoidmist eraldi failides või moodulites. See muudab lihtsamaks vajalike tüüpide tuvastamise ja importimise import type abil.
• Regulaarselt vaadake oma impordid üle: Teie projekti kasvades vaadake oma impordid regulaarselt üle, et tagada, et te ei impordiks ebavajalikke mooduleid või väärtusi. Kasutage selle protsessi automatiseerimiseks tööriistu nagu ESLint sobivate reeglitega.
• Dokumenteerige oma kasutus: Lisage oma koodile kommentaarid, et selgitada, miks te kasutate import type teatud juhtudel. See aitab teistel arendajatel teie kavatsusi mõista ja koodi kergemini hooldada.

Rahvusvahelise (i18n) ja lokaliseerimise (l10n) kaalutlused

Projektidega töötades, mis nõuavad rahvusvahelistamist (i18n) ja lokaliseerimist (l10n), on oluline kaaluda, kuidas import type teie koodi võib mõjutada. Siin on mõned punktid, mida meeles pidada:

• Tõlgitud stringide tüübimääratlused: Kui kasutate tõlgitud stringide esindamiseks tüübimääratlusi, saate import type kasutada nende tüüpide importimiseks ilma tegelikke tõlkefailide lisamist teie paketti. See võib aidata vähendada teie paketi suurust ja parandada jõudlust, eriti kui teil on suur hulk tõlkeid.
• Lokaadispetsiifilised tüübid: Võite omada erinevaid tüübimääratlusi erinevate lokaatide jaoks. import type kasutamine võimaldab teil selektiivselt importida tüübimääratlusi konkreetse sihtmärgiks oleva lokaadi jaoks, ilma teiste lokaatide tüübimääratlusi kaasamata.
• Lokaadiandmete dünaamilised importid: Mõnel juhul peate käitusajal dünaamiliselt laadima lokaadispetsiifilisi andmeid. Sellistes stsenaariumides saate kasutada regulaarseid import avaldusi andmete jaoks ja import type kõikide seotud tüübimääratluste jaoks.

Näited erinevatest riikidest

Siin on mõned näited, mis illustreerivad, kuidas import type saab kasutada erinevates stsenaariumides üle maailma:

• E-kaubanduse platvorm (globaalne): Globaalselt tooteid müüv e-kaubanduse platvorm kasutab toote tüüpide defineerimiseks `import type`. See tagab, et tooteandmete tüübid on erinevates piirkondades ühtsed, samal ajal vähendades paketi suurust. Näiteks:

            import type { Product } from './product.types';

  function displayProductDetails(product: Product) {
    // ...
  }
            

              
                Copy
              
            
          

See lähenemisviis tagab ühtse andmete tüüpide määramise sõltumata kasutaja asukohast.
• Tervishoiurakendus (Saksamaa): Saksamaal asuv tervishoiurakendus kasutab patsientide andmetüüpide defineerimiseks `import type`. See tagab kohalike andmete privaatsuse regulatsioonide (nt GDPR) järgimise, minimeerides ebavajaliku koodi lisamist paketti.

              import type { Patient } from './patient.types';
  
    function anonymizePatientData(patient: Patient) {
      // ...
    }
              
  
                
                  Copy
                
              
            

• Haridusplatvorm (Jaapan): Jaapanis asuv haridusplatvorm kasutab kursusmaterjali tüüpide defineerimiseks `import type`. See aitab optimeerida platvormi jõudlust, eriti kui tegemist on suurte mahudega sisuga.

              import type { CourseMaterial } from './course.types';
  
     function renderCourseMaterial(material: CourseMaterial) {
      // ...
     }
              
  
                
                  Copy
                
              
            

• Finantsteenuste rakendus (Brasiilia): Brasiilias asuv finantsteenuste rakendus kasutab tehingutüüpide defineerimiseks `import type`. See parandab rakenduse tõhusust ja usaldusväärsust, tagades andmete ühtluse ja minimeerides paketi suuruse.

              import type { Transaction } from './transaction.types';
  
    function processTransaction(transaction: Transaction) {
     // ...
    }
              
  
                
                  Copy
                
              
            

Järeldus

import type on TypeScripti võimas funktsioon, mis võimaldab teil oma koodi optimeerida, importides moodulist ainult tüübimääratlusi, ilma et impordiksite ühtegi selle käitusaja väärtust. See võib parandada paketisuurusi, vähendada tsükilisi sõltuvusi, parandada jõudlust ja suurendada koodi selgust. Järgides selles blogipostituses esitatud parimaid tavasid, saate tõhusalt kasutada import type, et kirjutada tõhusamat ja hooldatavamat TypeScripti koodi. Kuna TypeScript areneb pidevalt, on selliste funktsioonide nagu import type omaksvõtmine skaalautuvate ja jõudlusrikaste rakenduste loomisel ülioluline.